<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div class="rx-form-bolist-edit-mobile">
                    <div class="rx-form-bolist-mobile-container">
                        <div >
                            <div class="rx-edit-mobile-roll">
                                <a-tabs default-active-key="1" :size="'small'" class="rx-tabs" style="height:100%;" @change="tabChange">
                                    <a-tab-pane key="1" :tab="i18nCustom('form.buttonConfiguration','按钮配置')" forceRender>
                                        <div class="rx-tab-pane">
                                            <custom-button ref="button" :customConfig="config"></custom-button>
                                        </div>
                                    </a-tab-pane>
<!--                                    <a-tab-pane key="2" :tab="i18n('list.jsCustom','JS函数定义')" style="height:100%;">
                                        <div class="rx-tab-pane" style="height:100%;">
                                            <custom-bution-js ref="jsCustom" :customConfig="config" @jsStrChange="jsStrChange"></custom-bution-js>
                                        </div>
                                    </a-tab-pane>-->
                                </a-tabs>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>

import {RxDialog,RxLayout,Util} from "@lowcode/jpaas-common-lib";
import CustomButton from "./CustomButton.vue";
import CustomButionJs from "./CustomButionJs.vue";
import draggable from 'vuedraggable';
export default {
    name: "CustomButionConfig",
    props: {
        "layerid": {
            type: String
        },
        "destroy": {
            type: Function
        },
        "customConfig": {
            type: Object
        }
    },
    components:{
        RxDialog,
        RxLayout,
        CustomButton,
        CustomButionJs,
        draggable
    },
    data(){
        return {
            ctlAry:["button","jsCustom"],
            config:{},
            vm:null
        }
    },
    created() {
        if(this.customConfig && this.customConfig.customBtnJson){
            this.config=JSON.parse(this.customConfig.customBtnJson);
        }
    },
    methods:{
        i18nCustom(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoList", key);
        },
        handleSubmit(){
            Util.closeWindow(this,"ok",this.getData());
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        },
        jsStrChange(val){
            this.config.jsStr=val;
        },
        getData(){
            let returnConfig={
                btnConfig:[],
                jsStr:""
            };
            let btnJson =this.$refs.button.getData();
            if(!btnJson.success){
                this.$message.error(btnJson.message);
                return ;
            }
            let data = btnJson.data;
            returnConfig.btnConfig=data.btnConfig;
            returnConfig.maxButton=data.maxButton;
            returnConfig.styleButton=data.styleButton;
            returnConfig.jsStr=this.config.jsStr;

            return returnConfig;
        },
        tabChange(activeKey) {
            /*this.$nextTick(function () {
                if (activeKey == '2') {
                    this.$refs.treeTab.setData(this.vm, this.config);
                }else if (activeKey == '6') {
                    this.$refs.jsCustom.setData(this.vm, this.config);
                }
            })*/
        }
    }
}
</script>

<style scoped>
.rx-card-item-table {
    width: 100%;
}
.rx-card-item-table tr{
    text-align: center;
}
.rx-card-item-table tr th{
    border: 1px solid #e5e5e5;
    height: 43px;
}
.rx-card-item-table tr td{
    height: 35px;
    border: 1px solid #e5e3e3;
}
.rx-form-bolist-edit-mobile-toolbar{
    padding: 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: right;
}
.rx-form-bolist-edit-mobile-toolbar button{
    margin-left: 6px;
}
.rx-form-bolist-mobile-container{
    flex: 1;
    display: flex;
}
.rx-form-bolist-edit-mobile{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.rx-edit-mobile{
    flex: 3;
    position: relative;
    min-width: 406px;
}
.rx-edit-mobile-roll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.rx-edit-mobile-roll-left{
    text-align: center;
}
.rx-edit-mobile-roll-left:before{
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.rx-edit-toolbar{
    max-width: 900px;
    width: 100%;
    border-left: 1px solid #e6e8eb;
    position: relative;
}
.rx-edit-mobile-middle{
    display: inline-block;
    position: relative;
    width: 378px;
    height: 750px;
    vertical-align: middle;
}
.rx-iphone-header{
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    height: 95px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: #2e86ff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.rx-iphone-header>span{
    display: inline-block;
    font-size: 20px;
    padding-bottom: 10px;
    color: #fff;
}
.rx-iphone-box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
}
.rx-edit-mobile-container{
    position: absolute;
    top: 95px;
    left: 26px;
    right: 26px;
    bottom: 23px;
    overflow: auto;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    z-index: 5;
    text-align:left;
    background-color: #f0f2f5;
    padding:0 10px;
    box-sizing: border-box;
}
.rx-tabs >>> .ant-tabs-top-bar .ant-tabs-tab{
    margin-right: 20px;
    padding: 8px 2px;
}
.rx-tabs >>> .ant-tabs-top-bar{
    margin-bottom: 0;
}
.rx-tabs .rx-tab-pane{
    padding: 10px;
}


.rx-card-item-center{
    flex: 1;
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px 0;
    cursor: move;
}
.rx-card-item-imgbox{
    padding:4px 0px 10px 8px;
}
.rx-card-item-content{
    flex: 1;
    padding:10px 10px 0 10px;
}
.fontColor{
    color: #2e86ff!important;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
.item-list-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
}
.item-list-top .list-top-main{
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.list-top-less-main{
    font-size: 16px;
}
.item-list-center,
.item-list-bottom{
    display: flex;
    font-size: 12px;
    white-space: nowrap;
}
.item-list-bottom,
.item-list-center{
    padding-bottom: 10px;
}
.item-list-center li{
    position: relative;
    padding:0 6px;
    border-right: 1px solid transparent;
}
.item-list-center li:after{
    content: '';
    height: 12px;
    width: 1px;
    background-color: #e4e7eb;
    position: absolute;
    right: -1px;
    top: 3px;
}
.item-list-center li:first-child{
    padding-left: 0;
}
.item-list-center li:last-child{
    padding-right: 0;
}
.item-list-center li:last-child:after{
    content: '';
    display: none;
}
.item-list-bottom li{
    padding: 2px 6px;
    background-color: #f6f6f4;
    border-radius: 2px;
    margin-right: 5px;
}

.rx-card-item-content-right {
    position: relative;
}
.rx-card-item-content-right .state{
    padding:2px 10px;
    background-color: #87d068;
    border-radius: 0px 2px 0px 12px;
    top: 0;
    right: 0;
    position: absolute;
    color: #fff;
    font-size: 12px;
}


</style>